<template>
  <div>
    <div class="h-8 border-b w-full text-title flex items-center px-4 justify-between overflow-hidden bg-white">
      <div class="flex items-center gap-x-2 text-sm">
        <div class="flex items-center gap-x-2">
          <div class="w-2 h-2 rounded-full text-title" :class="[statusColor]"></div>
          {{ loading ? "连接中" : "" }}
        </div>

        <div class="flex items-center gap-x-2">
          <div>连接数:</div>
          <div class="">{{ props.viewUserNames.length }}</div>
        </div>
      </div>
      <div class="flex gap-x-2">
        <div class="flex text-sm">
          <div>连接码：</div>
          <div>{{ clientId }}</div>
        </div>
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const props = defineProps({
  loading: {
    type: Boolean,
    default: true,
  },
  commType: {
    type: String,
    default: "",
  },
  username: {
    type: String,
    default: "",
  },
  viewUserNames: {
    type: Array,
    default: () => [],
  },
  clientId: {
    type: Number,
    default: null,
  },
});

const statusColor = computed(() => {
  return props.loading ? "bg-red-300" : "bg-green-300";
});
</script>
<style scoped lang="less"></style>
